<script setup>
import {useSysOrganizationTree} from "@/composables/sys/organization.js";

const props = defineProps({
  keyField: {
    type: String,
    default: 'code'
  },
})
const pattern = ref('')
const {data, isLoading} = useSysOrganizationTree()
const treeData = computed(() => {
  if (isLoading.value) {
    return []
  }
  return [
    {
      name: '顶级',
      code: '-',
      children: data.value?.data || [],
      disabled: false
    }
  ]
})

const emits = defineEmits([
  'on-node-click',
])

</script>

<template>
  <n-space vertical>
    <n-input v-model:value="pattern" placeholder="搜索" clearable/>
    <n-tree
        :node-props="({option}) => {
          return {
            onClick: () => emits('on-node-click', option)
          }
        }"
        default-expand-all
        :key-field="keyField"
        label-field="name"
        :show-irrelevant-nodes="false"
        :pattern="pattern"
        :data="treeData"
        block-line
        :render-prefix="({option}) => option.code"
    />
  </n-space>
</template>

<style scoped>

</style>